<template>
  <div id="app">
    <div class="middle-column">
      <el-form    label-width="80px" class="login-form">
        <h2 class="title">登陆页面</h2>
        <el-form-item label="用户名" prop="username">
          <el-input v-model="username"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input type="password" v-model="password" show-password></el-input>
        </el-form-item>
        <el-form-item label="类型" prop="type" >
          <el-select v-model="value" placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.lable"
                :value="item.value">
              </el-option>
            </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="login">登录</el-button>
          <el-button @click="register"  >注册</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-dialog
      title="注册"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose">
      <span>
        <el-input  placeholder="请输入手机号" v-model="phone"></el-input>
        <el-button type="primary" @click="sendCode">发送验证码</el-button>
      </span>

    </el-dialog>
  </div>
</template>

<script>
import router from '../router';

export default {
  name: "Login",
  data() {
    return {
      username:"",//账号
      password:"",//密码
      options:[   //选择的类型
        {lable:"用户",
        value:3},
        {lable:"商家",
        value:4},
        {lable:"管理员",
        value:1},
        {lable:"维修员",
        value:2},
      ],
       value:"",
       dialogVisible:false,
       phone:"",
        ws: null, // WebSocket 实例


    };
  },
  methods: {
    /**
     * 发送验证码
     */
   sendCode(){
     this.$http.get("/user/account/sendLoginCode",{
       params:{
         phone:this.phone
       }
     }).then(resp=>{

     })
   },


    /**
     * 注册方法
     */
    register(){
      this.dialogVisible=true
    },

    /**
     * 登录方法
     */
    login(){
      this.$http.post("/user/account/login",{
        username:this.username,
        pass:this.password,
        type:this.value
      }).then(resp=>{
        if(resp.data.code==200){
          if(resp.data.data.type==4){
            //商家登录成功跳转商家后台
            router.push('/store')
            //先服务器发送连接
            this.ws = new WebSocket("ws://localhost:8089/order/websocket?id="+sessionStorage.getItem("userId"));
            this.ws.onopen = () => {
              console.log("连接成功");
            };
            this.ws.onmessage = (e) => {
              console.log("接收消息成功");
              let message=JSON.parse(e.data)
              this.list.push(message)
            };
            this.ws.onclose = () => {
              console.log("连接关闭");
            };
            sessionStorage.setItem("userId",resp.data.data.userId)
          }
        }else{
          alert(resp.data.message)
        }

      })
    }

  }
};
</script>

<style scoped>
#app {
  height: 100vh; /* 视口高度 */
}

.el-row {
  margin: 0;
  padding: 0;
  height: 100%;
}

.el-col {
  padding: 0;
}

.middle-column {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 400px;
  background-color: rgba(255, 255, 255, 0.8);
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  width: 100%;
  max-width: 400px;
  margin:100px auto;
}

.title {
  text-align: center;
  margin-bottom: 20px;
}
</style>
